<template>
  <div class='container'>
    <el-card class="box-card">
        胡娟
        <el-form :inline="true"  class="demo-form-inline">
          <el-form-item label="关键字">
            <el-input v-model="formDate.keyword" placeholder="根据文章标题搜索"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="formDate.state" placeholder="请选择">
              <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm">清除</el-button>
            <el-button type="primary" @click="searchBtn">搜索</el-button>
          </el-form-item>
        </el-form>
        <div class="addcom" style="margin-top: -60px;" >
          <el-button icon="el-icon-edit" type="success" size="small" @click="companysAd">新增技巧</el-button>
        </div>
        <!-- @companysUpdate="companysUpdate"
         -->
        <ActiclesTable
        :formDate="formDate"
        :tableData="tableData"
        @handleSChange="handleSChange"
        @handleCChange="handleCChange"
        @acticlesUpdate="acticlesUpdate"
        @onState="onState"
        />
    </el-card>
    <el-dialog
      v-if="dialogFormVisible"
      :title="title"
      :visible.sync="dialogFormVisible"
      width="50%"
      @close="onCloseDialog"
      >
      <el-form ref="formup" :model="formBase" :rules="rules" label-width="80px">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="formBase.title"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody">
          <quill-editor
            ref=""
            v-model="formBase.articleBody"
            :options='editorOption'
            @blur="onEditorBlur($event)"
            />
        </el-form-item>
        <el-form-item label="视频地址">
          <el-input v-model="formBase.videoURL"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onCloseDialog">取 消</el-button>
        <el-button type="primary" @click="onActicles">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { list, add, update } from '@/api/hmmm/articles.js'
import ActiclesTable from '../components/articles-table.vue'
import { status } from '@/api/hmmm/constants.js'
Vue.use(VueQuillEditor)
export default {
  name: 'Acticles',
  components: {
    ActiclesTable
  },
  data () {
    return {
      editorOption: { // 工具栏
        placeholder: '请在这里输入',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], // 引用，代码块
            // [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            // [{ script: 'sub' }, { script: 'super' }], // 上下标
            // [{ indent: '-1' }, { indent: '+1' }], // 缩进
            // [{ direction: 'rtl' }], // 文本方向
            // [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题
            // [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            // [{ font: [] }], // 字体
            // [{ align: [] }], // 对齐方式
            // ['clean'], // 清除字体样式
            ['image', 'video'] // 上传图片、上传视频
          ]
        },
        theme: 'snow'
      },
      formInfo: {},
      title: '',
      dialogFormVisible: false,
      formDate: {
        keyword: '',
        state: null,
        page: 1,
        pagesize: 10

      },
      formBase: {
        articleBody: '',
        page: 1,
        pagesize: 10,
        videoURL: '',
        title: ''
      },
      CurrentChange: {
        page: 1,
        pagesize: 10
      },
      tableData: [],
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.loadList()
    this.status = status
  },
  methods: {
    onEditorBlur (e) {
      this.$refs.formup.validateField('articleBody')
    },
    // 获取文章列表
    async loadList () {
      this.tableData = (await list()).data
    },
    // 关闭弹窗
    onCloseDialog () {
      this.dialogFormVisible = false
      this.formBase =
       {
         articleBody: '',
         videoURL: '',
         title: '',
         page: 1,
         pagesize: 10
       }
    },
    // 添加或编辑
    async onActicles () {
      try {
        await this.$refs.formup.validate()
        if (this.formBase.id) {
          await update(this.formBase)
          this.$message.success('编辑成功')
          console.log(this.formBase)
          this.handleChange(this.formBase)
        } else {
          await add(this.formBase)
          this.$message.success('添加成功')
          this.loadList()
        }
        this.onCloseDialog()
      } catch (error) {
        console.log(error)
      }
    },
    // 重置表单
    resetForm () {
      this.formDate.keyword = ''
      this.formDate.state = null
      this.formDate.page = 1
      this.formDate.pagesize = 10
      this.loadList()
    },
    // 搜索
    searchBtn () {
      this.formDate.page = 1
      this.handleChange(this.formDate)
    },
    // 添加
    companysAd () {
      this.dialogFormVisible = true
      this.title = '新增文章'
    },
    // 编辑
    acticlesUpdate (row) {
      this.dialogFormVisible = true
      this.title = '修改文章'
      console.log(this.formDate.page)
      const { page, pagesize } = this.formDate
      const { id, title, articleBody, videoURL } = row
      this.formBase = { id, title, articleBody, videoURL, page, pagesize }
    },
    // 分页
    async handleChange (data) {
      const res = await list(data)
      this.tableData = res.data
    },
    // 每页条数
    handleSChange (val) {
      this.CurrentChange.pagesize = val
      this.formDate.pagesize = val
      this.handleChange(this.CurrentChange)
    },
    // 页数切换
    handleCChange (val) {
      this.CurrentChange.page = val
      this.formDate.page = val
      this.handleChange(this.CurrentChange)
    },
    // 状态切换，页面渲染
    onState (data) {
      this.handleChange(data)
    }
  }
}
</script>

<style scoped lang='less'>
.addcom{
  display: flex;
  justify-content: flex-end;
}
::v-deep .ql-editor{
  height: 200px;
}
</style>
